<template>
    <div class="order-detail-header">
        <div class="order-detail-status-top">
            <div class="order-detail-status-icon"
                 :class="{'order-detail-status-icon-disabled': statusAwaitingPayment || statusCancelled || statusClosed || statusDeclined}">
                <van-icon :name="statusIcon" :size="30"/>
            </div>
            <div class="order-detail-status-content"
                 :class="{ 'order-detail-status-content-center': statusContentCenter}">
                <div class="order-detail-status-title">{{statusTitle}}</div>
                <van-count-down class="order-detail-status-count-down-awaiting-payment"
                                :time="placingExpires" format="请于 HH小时 mm分 ss秒 内付款，超时订单将自动关闭"
                                v-if="statusAwaitingPayment"/>
                <span class="order-detail-status-cancelled" v-if="statusCancelled">{{order.cancelReason}}</span>
                <span class="order-detail-status-cancelled" v-if="statusClosed">{{order.closeReason}}</span>
                <span class="order-detail-status-cancelled" v-if="statusDeclined">{{order.declineReason}}</span>
            </div>
        </div>
        <van-steps class="van-hairline--bottom" :active="statusStep" v-if="showStatusStep">
            <van-step>买家付款</van-step>
            <van-step>商家发货</van-step>
            <van-step>交易完成</van-step>
        </van-steps>
        <order-detail-shipment :order="order" v-if="showTracking"/>
        <order-detail-address :address="order.shippingAddress"/>
    </div>
</template>

<script>
  import { order } from "@mall/api-services"
  import { CountDown, Icon, Step, Steps } from "vant"
  import OrderDetailAddress from "@/views/order/OrderDetailAddress"
  import {
    getStatusLabel,
    isAwaitingFulfillment,
    isAwaitingPayment,
    isCancelled,
    isClosed,
    isCompleted,
    isDeclined,
    isPartiallyShipped,
    isShipped,
  } from "@/utils/order"
  import OrderDetailShipment from "@/views/order/OrderDetailShipment"
  import dayjs from "dayjs"

  export default {
    name: "OrderDetailHeader",
    components: {
      OrderDetailShipment,
      OrderDetailAddress,
      [CountDown.name]: CountDown,
      [Icon.name]: Icon,
      [Step.name]: Step,
      [Steps.name]: Steps,
    },
    props: {
      order: order.Order,
    },
    computed: {
      placingExpires() {
        const { order } = this
        return dayjs(order.placingExpiredTime).valueOf() - Date.now()
      },
      statusContentCenter() {
        const { statusAwaitingFulfillment, statusShipped, statusPartiallyShipped, statusCompleted } = this
        return statusAwaitingFulfillment || statusShipped || statusPartiallyShipped || statusCompleted
      },
      status() {
        return this.order.status
      },
      statusAwaitingPayment() {
        const { status } = this
        return isAwaitingPayment(status)
      },
      statusAwaitingFulfillment() {
        const { status } = this
        return isAwaitingFulfillment(status)
      },
      statusPartiallyShipped() {
        const { status } = this
        return isPartiallyShipped(status)
      },
      statusShipped() {
        const { status } = this
        return isShipped(status)
      },
      statusCompleted() {
        const { status } = this
        return isCompleted(status)
      },
      statusCancelled() {
        const { status } = this
        return isCancelled(status)
      },
      statusDeclined() {
        const { status } = this
        return isDeclined(status)
      },
      statusClosed() {
        const { status } = this
        return isClosed(status)
      },
      statusIcon() {
        const { statusAwaitingFulfillment, statusShipped, statusPartiallyShipped, statusCancelled, statusCompleted } = this
        if (statusAwaitingFulfillment) {
          return "todo-list-o"
        } else if (statusShipped || statusPartiallyShipped) {
          return "logistics"
        } else if (statusCancelled) {
          return "failure"
        } else if (statusCompleted) {
          return "completed"
        }
        return "pending-payment"
      },
      statusTitle() {
        const { status } = this
        return getStatusLabel(status)
      },
      showStatusStep() {
        return !this.statusCancelled && !this.statusClosed && !this.statusDeclined
      },
      statusStep() {
        const { statusShipped, statusPartiallyShipped, statusCompleted } = this
        if (statusShipped || statusPartiallyShipped) {
          return "1"
        } else if (statusCompleted) {
          return "2"
        }
        return "0"
      },
      showTracking() {
        const { statusAwaitingPayment, statusAwaitingFulfillment, statusCancelled, statusDeclined } = this
        return !statusAwaitingPayment && !statusAwaitingFulfillment && !statusCancelled && !statusDeclined
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .order-detail-header {
        .order-detail-status-top {
            display: flex;
            background: #fff;
            padding: 9px;

            .order-detail-status-icon {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                width: 40px;
                background: $primary-color;
                border-radius: 6px;
                color: #fff;
                margin-right: 9px;
            }

            .order-detail-status-icon-disabled {
                background: $disabled-color;
            }

            .order-detail-status-content {

                .order-detail-status-title {
                    font-size: 15px;
                }

                .order-detail-status-count-down-awaiting-payment {
                    font-size: 12px;
                    color: $gray-6;
                }

                .order-detail-status-cancelled {
                    font-size: 12px;
                    color: $gray-6;
                }
            }

            .order-detail-status-content-center {
                display: flex;
                align-items: center;
                font-weight: 700;
            }

        }

    }
</style>
